<template>
  <div class="log">
    <a-card>
      <h2>日志管理</h2>
      <a-divider></a-divider>

      <a-table :rowKey="(record,index)=> index"  bordered :columns="columns" :data-source='list' :pagination="false" :scroll="{  y: 300 }">
        <template #createdAt="{record}">
          {{formatTimestamp(record.meta.createdAt)}}
        </template>
        <template #actions="{record}">
          <a href="javascript:;" @click="remove(record)">删除</a>
        </template>
      </a-table>
      <a-pagination class="pagi" v-model:current="curPage" :pageSize="20" :total="total" @change="setPage"></a-pagination>
    </a-card>
  </div>
</template>

<script >
import { ref, defineComponent, onMounted } from "vue";
import { log } from "../../service/index";
import { getLogInfoByPath } from "../../utils/log";
import { formatTimestamp } from "../../utils/formatTimestamp";
const columns = [
  {
    title: "用户名",
    dataIndex: "user.account",
  },
  {
    title: "动作",
    dataIndex: "action",
  },
  {
    title: "记录时间",
    slots: {
      customRender: "createdAt",
    },
  },
  {
    title: "操作",
    slots: {
      customRender: "actions",
    },
  },
];
export default defineComponent({
  setup() {
    const curPage = ref(1);
    const total = ref(0);
    const list = ref([]);
    const getList = () => {
      // const res = await log.list(curPage.value, 20);
      log.list(curPage.value, 20).then((res) => {
        if (res.data.code == 200) {
          let resData = res.data.data;
          console.log("111打印res", resData);
          list.value = resData.list;
          total.value = resData.total;
          resData.list.forEach((item) => {
            item.action = getLogInfoByPath(item.request.url);
          });
        }
      });
    };
    onMounted(() => {
      getList();
    });
    const setPage = (page) => {
      curPage.value = page;
      getList();
    };
    const remove = async ({ _id }) => {
      const res = await log.remove(_id);
      console.log('delete/log接口',res);
      getList()
    };
    return {
      curPage,
      total,
      list,
      columns,
      setPage,
      formatTimestamp,
      remove,
    };
  },
});
</script>

<style lang="less" scoped>
.pagi {
  text-align: right;
  margin-top: 16px;
}
</style>